<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="d3.js"></script>
  <script src="trees.js"></script>
</head>

<body>
  <div>
    <svg id="tree" width="300" height="300" style="background:lightgrey">
      <text x="150" y="285" text-anchor="middle">d3.tree</text>
    </svg>
    <svg id="tree2" width="300" height="300" style="background:lightgrey">
      <text x="150" y="285" text-anchor="middle">d3.cluster</text>
    </svg>
  </div>

  <div>
    <svg id="radial" width="300" height="300" style="background:lightgrey" />
  </div>

  <div>
    <svg id="treemap" width="300" height="300" style="background:lightgrey" />
  </div>

  <div>
    <svg id="net" width="600" height="600" style="background:lightgrey">
    </svg>
  </div>

  <div>
    <svg id="simul" width="600" height="600" style="background:lightgrey">
    <circle id="c1" cx="350" cy="300" r="10" fill="red" />
    <circle id="c2" cx="250" cy="300" r="10" fill="blue" />
    </svg>
  </div>
  
</body>
</html>
